import { Meta } from "@storybook/addon-docs";

<Meta title="Foundation/Typography"  />

# Typography

Typography is an important part of the design process. It plays a vital role in the process of communicating with the user.

<br/><br/>

### Typeface
Use [Lato](https://fonts.google.com/specimen/Lato) as the standard typeface, [Poppins](https://fonts.google.com/specimen/Poppins) for headlines and subheadline, and [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) for code snippets.

<br/><br/>

### Type scale


| HTML tag  | Size px | Font weight           | Text example              |
|-----------|---------|-----------------------|---------------------------|
| `<h1>`    | 24px    | Poppins Normal 400    | <h1>H1 headline</h1>      |
| `<h2>`    | 21px    | Poppins Normal 400    | <h2>H2 headline</h2>      |
| `<h3>`    | 18px    | Poppins Normal 400    | <h3>H3 headline</h3>      |
| `<h4>`    | 16px    | Poppins Normal 400    | <h4>H4 headline</h4>      |
| `<h5>`    | 14px    | Poppins Normal 400    | <h5>H5 headline</h5>      |
| `<h6>`    | 12px    | Poppins Normal 400    | <h6>H6 headline</h6>      |
| `<body>`  | 14px    | Lato Normal 400       | This is default body text |
| `<code>`  | 14px    | Roboto Mono Normal 400| <code>code</code>         |
